<template>
  <div :class="$style.btmbar">
    <div :class="$style.barleft">
      <span :class="$style.time">{{ botProps.TIME | formatDate }}</span>
      <span :class="$style.clickcount">
        点击数:
        <span :class="$style.num">{{botProps.VIEW_NUM}}</span>
      </span>
    </div>

    <div :class="$style.barright">
      <div :class="$style.like" @click.stop="like" :style="isActive"></div>
      <span :class="$style.likenum">{{num}}</span>
      <!-- <div :class="$style.forward" @click="share"></div> -->
    </div>
  </div>
</template>

<script>
import RemoteDAO from '../../tools/remoteDAO'
import Utils from '../../tools/utils'
export default {
  name: 'BottomBar',
  data () {
    return {
      funcType: '',
      active: false,
      num: 0,
      isClick: false
    }
  },
  filters: {
    formatDate (dd) {
      if (!dd) {
        return '2017-07-21 11:00:00'
      }
      return dd.includes(' ')
        ? dd : dd.slice(0, 10) + ' ' + dd.slice(10)
    }
  },
  props: {
    botProps: Object
  },
  mounted () {
    this.num = this.botProps.UP_NUM
    this.funcType = this.botProps.IS_LIKE ? 'voteCancel' : 'voteUp'
    this.active = this.botProps.IS_LIKE
  },
  methods: {
    like () {
      if (!Utils.checkUserCode()) {
        return
      }
      if (!this.isClick) {
        this.isClick = !this.isClick
        this.funcType === 'voteUp' ? this.num++ : this.num--
        this.active = !this.active
        RemoteDAO.voteMessage({targetId: this.botProps.ID, funcType: this.funcType}).then(response => {
          this.funcType = this.active ? 'voteCancel' : 'voteUp'
          this.isClick = !this.isClick

          // bury
          Utils.buryPoint('22004')
        }, err => {
          throw err
        })
      } else {
        return false
      }
    }
  },
  computed: {
    isActive () {
      return {
        backgroundImage: this.active
          ? `url(${require('@/assets/img/dianzan@2x.png')})`
          : `url(${require('@/assets/img/dianzanwu@2x.png')})`
      }
    }
  }
}
</script>

<style module lang="less">
  .btmbar {
    height: 44px;
    margin: 0 6px;
    text-align: left;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -webkit-align-items: center;
    position: relative;
    &::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 1px; /*no*/
      width: 100%;
      background: linear-gradient(to right,transparent 50%,rgb(200,200,200) 0) repeat left top /5px 100%; /*no*/
    }
  }

  .time {
    @media screen {
      @media (max-width: 400px) {
        font-size: 11px;/*no*/
        line-height: 12px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 12px;/*no*/
        line-height: 13px;/*no*/
      }
    }
  }

  .clickcount {
    @media screen {
      @media (max-width: 400px) {
        font-size: 12px;/*no*/
        line-height: 16px;
      }
      @media (min-width: 400px) {
        font-size: 13px;/*no*/
        line-height: 17px;
      }
    }
    margin-left: 17px;

    .num {
      @media screen {
        @media (max-width: 400px) {
          font-size: 11px;/*no*/
        }
        @media (min-width: 400px) {
          font-size: 12px;/*no*/
        }
      }
    }
  }

  .time, .clickcount {
    color: #9D9D9D;
  }

  .barleft {
    width: 70%;
    padding-left: 19px;
  }

  .barright {
    width: 30%;
    text-align: right;
    // padding-right: 17px;
    height: 18px;
    display: flex;
    justify-content: flex-end;

    .likenum {
      font-size: 11px;/*no*/
      color: #777;
      display: inline-block;
      height: 18px;
      line-height: 18px;/*no*/
      margin-left: 6px;
      margin-right: 16px;
    }
  }

  .like, .forward {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
  }
  // .like {
  //   background-image: url('../../assets/img/dianzanwu@2x.png');
  //
  //   &:active {
  //     background-image: url('../../assets/img/dianzan@2x.png');
  //   }
  // }
  .forward {
    background-image: url('../../assets/img/zhuanfawu@2x.png');

    &:active {
      background-image: url('../../assets/img/zhuanfa@2x.png');
    }
  }

</style>
